<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Chapter4</title>
    <style>
        html,body {height: 100%;color: #fff;}
        body {
            background: url(timg.jpg) center center;
            background-size: cover;
            margin: 0;
            padding: 0;
            /*position: relative;*/
        }
        header,nav { width: 99%;position: absolute;}
        header {margin-left: 10px;top: 1%; }
        nav {top: 10%;}
        nav ul {list-style: none; }
        nav li {float: left;margin-left: 10px;}
        a:link {
            font-size: 16px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 10px 50px;
            text-decoration: none;
        }
        a:visited{
            font-size: 16px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 10px 50px;
            text-decoration: none;
        }
        a:hover{
            font-size: 16px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 10px 50px;
            text-decoration: none;
            background-color:#887fff;
        }
        footer {
            width: 100%;
            position: absolute;
            bottom: 1%;
            text-align: center;
        }
        #side {
            position: absolute;
            top: 30%;
            right: 5%;
            border: 1px solid #fff;
            border-radius: 5px;
            font-size: 2em;
            padding: .75em;
        }
    </style>
</head>

<body>
    <header>
        <h1>第4章 层叠样式表初探
        </h1>
    </header>
    <nav>
        <ul>
            <li><a href="1.html">简单的CSS例子</a></li>
            <li><a href="2.html">CSS引入</a></li>
            <li><a href="3.html">CSS选择器例子</a></li>
            <li><a href="4.html">完整的页面</a></li>
        </ul>
    </nav>
    <div id="side">
        <p>枯藤老树昏鸦</p>
        <p>小桥流水人家</p>
        <p>夕阳西下</p>
        <p>断肠人在天涯</p>
    </div>
    <footer>
        Copyright&copy;2022-2023 佛山职业技术学院
    </footer>
</body>

</html>